<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>MeteoCal - Registration</title>
        <link href="css/application.css" rel="stylesheet"></link>
        <link rel="icon" type="image/ico" href="images/logoico.ico"/>
    </h:head>
    <h:body><div id="body">

            <div id="head">
                <a href="home.xhtml"><img src="images/logo.png" /></a>
            </div>

            <div id="title">
                <p1>MeteoCal</p1><br />
                <p2>Your website to plan your events.</p2>
            </div>

            <div id="registration">
                <center>
                    
                    <p style="font-size: 30px" ><b>Registration</b></p>
                    
                    <h:form id="registrationform">
                        <h:panelGrid columns="1" id="matchGrid">

                            <h:messages  style="font-weight: bold; color:red; padding:0px; margin:0;"/>
                            
                            <h:outputLabel for="username">Username
                                <p:inputText id="username" value="#{uBean.newUser.username}" style="width:250px; float:right;" >
                                     <p:ajax update="usernamemsg"/>
                                </p:inputText>
                                <p:message id="usernamemsg" for="username" />
                            </h:outputLabel>

                            <br />
                            <h:outputLabel for="name">Name
                                <p:inputText id="name" value="#{uBean.newUser.name}" style="width:250px; float:right;">
                                     <p:ajax update="namemsg"/>
                                </p:inputText>
                                <p:message id="namemsg" for="name" />
                            </h:outputLabel>

                            <br />
                            <h:outputLabel for="surname">Surname
                                <p:inputText id="surname" value="#{uBean.newUser.surname}" style="width:250px; float:right;">
                                     <p:ajax update="surnamemsg"/>
                                </p:inputText>
                                <p:message id="surnamemsg" for="surname" />
                            </h:outputLabel>

                            <br />
                            <h:outputLabel for="email">E-mail
                                <p:inputText id="email" value="#{uBean.newUser.email}" style="width:250px;  float:right;">
                                     <p:ajax update="emailmsg"/>
                                </p:inputText>
                                <p:message id="emailmsg" for="email" />
                            </h:outputLabel>	
                            <br />
                            
                            <h:outputLabel for="password">Password
                                <p:password  id="password" value="#{uBean.newUser.password}" style="width:250px;  float:right;"
                                             feedback="true" match="cpassword" label="Password" >
                                <p:ajax update="pwdmsg"/>
                                </p:password>
                                <p:message id="pwdmsg" for="password" />
                            </h:outputLabel>

                            <br />
                            <h:outputLabel for="cpassword" >Confirm password
                                <p:password id="cpassword" style="width:250px;  margin-left: 50px; float:right;" />
                            </h:outputLabel>

                            <br />                
                            <h:outputLabel for="privacy" styleClass="form"><h:selectOneRadio value="#{uBean.newUser.private1}" 
                                                     id="privacy" style="float:right;" >Calendar privacy
                                    <f:selectItem itemValue="#{false}" itemLabel="Public"  />
                                    <f:selectItem itemValue="#{true}" itemLabel="Private" />
                                </h:selectOneRadio>
                            </h:outputLabel>
                           
 
                        </h:panelGrid>
                         <br />
                         <p:commandButton value="Register" action="#{uBean.create()}" update="matchGrid"
                                         style="border:0; box-shadow:0px 2px 5px #000000;" />
                    </h:form></center>
            </div>

        </div>      
    </h:body>
</html>

